<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        *
        {
            padding: 0;
            margin: 0;
        }
        body
        {
           font-size: 1px; 
        }
        #container
        {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
        }
        #header
        {
            width: 1000px;
            height: 60px;
            border-radius:8px ;
            background-color: rgb(251, 255, 0);
        }
        #up
        {
            background-color: black;
            width: 980px;
            height: 40px;
            align-self: center;
            border-radius:8px ;
            position:absolute;
            top:10px;
            left: auto;
        }
        #home
        {
            float: left;
            width: 60px;
            height: 40px;
            background-color: black;
        }
        #news
        {
            float: left;
            width: 60px;
            height: 40px;
            background-color: black;
        }
        #contact
        {
            float: left;
            width: 60px;
            height: 40px;
            background-color: black;
        }
        #about
        {
            float: left;
            width: 60px;
            height: 40px;
            background-color: black;
        }
        #logout
        {
            float: right;
            width: 60px;
            height: 40px;
            background-color: black;
        }
        button
        {
            background-color: black;
            color: white;
            text-align: center;
            padding: 10px 10px;
            border: none;
        }
        button:hover
        {
            padding: 13px 10px;
            background-color: rgb(114, 20, 20);
            font-weight: bold;
        }
        #main
        {
            width: 1000px;
            height: 400px;
            border-radius:8px ;
            background-color: rgb(251, 255, 0);
        }
        #aside1
        {
            float: left;
            width: 250px;
            height: 400px;
            background-color: rgb(164, 218, 250);
            border-radius:8px ;
        }
        #test
        {
            background-color: rgb(42, 133, 175);
            height: 60px;
        }
        p1{font-size: 24px;text-align: center;}
        p{font-size: 18px;}
        #button1
        {
            color: black;
            text-align: center;
            border: none;
            padding: auto;
            background-color: rgb(119, 205, 255);
        }
        #button1:hover
        {
            padding: 13px 10px;
            width: 250px;
            background-color: rgb(172, 172, 172);
            font-weight: bold;
        }
        #aside2
        {
            float: left;
            width: 750px;
            height: 400px;
            border-radius:8px ;
            background-color: rgb(252, 253, 176);
        }
        #footer
        {
            width: 1000px;
            height: 20px;
            background-color: rgb(251, 255, 0);
            text-align: center;
            border-radius:8px ;
        }
        h1{font-size: 50px;}
        h2{font-size: 20px;}
        h3{font-size: 20px;}
        h4{font-size: 20px;}
    </style>
<body>
    <div id="container">
        <div id="header">
            <div id="up">
                <div id="home"><button>Home</button></div>
                <div id="news"><button>News</button></div>
                <div id="contact"><button>Contact</button></div>
                <div id="about"><button>About</button></div>
                <div id="logout"><button>Logout</button></div>
            </div>
        </div>
        <div id="main">
            <div id="aside1">
                <div id="test"><p1>云技术管理</p1></div>
                <p><button id="button1">云服务器</button></p>
                <p><button id="button1">云数据库</button></p>
                <p><button id="button1">负载均衡</button></p>
                <div id="test"><p1>安全管理</p1></div>
                <p><button id="button1">云盾控制台</button></p>
                <p><button id="button1">DDoS高防IP</button></p>
                <p><button id="button1">Web应用防火墙</button></p>
                <p><button id="button1">CA证书服务</button></p>
            </div>
            <div id="aside2">
                <h1>设计内容</h1>
                <p>为各部分区域设计统一样式；全局取消元素内外边距，按box尺寸计算</p>
                <h2>需求0</h2>
                <p>基于当前HTML代码，弹性栅格布局页面。header/footer占1行；main中sidebar最小宽度200px；article占剩余全部。 行中空间不足元素不换行，由响应式布局决定小尺寸显式效果</p>
                <h3>上导航+1</h3>
                <p>基于弹性布局，为header中的上导航添加背景色/悬浮字体颜色等样式，且将logout推至最右侧</p>
                <h4>左侧边栏+1</h4>
                <p>为左侧边栏添加样式，添加背景色/字体色/悬浮等等样式</p>
            </div>
        </div>
        <div id="footer">201816103077 李皓田</div>
    </div>
</body>
</html>